<template>
    <div class="dashboard-container">
        <div class="project-index-view">
            <div>
                <div>
                    <p class="text-center">有效回收量</p>
                    <count-to :end-val="projectStats.completeCount"
                              style="font-size: 20px;"
                    />
                </div>
                <div>
                    <p>总浏览量</p>
                    <count-to :end-val="projectStats.hitsCount" style="font-size: 20px;" />
                </div>
                <div>
                    <p>回收率</p>
                    <count-to :end-val="projectStats.completeRate" style="font-size: 20px;" />
                    %
                </div>
                <div>
                    <p>平均完成时间</p>
                    <span style="font-size: 20px;">
                        {{ projectStats.avgCompleteTime }}
                    </span>
                </div>
            </div>
        </div>
        <div class="line-chat">
            <line-chart :width="'95vw'" :chart-option="lineChartOptionData" />
        </div>
        <el-divider />
        <div style="display: flex; flex-direction: row; justify-content: space-around;">
            <div style="width: 50%;">
                <p class="tag-title">常用设备</p>
                <div>
                    <pie-chart :width="'48vw'" :chart-option="pieChartOptionData" :height="'250px'" />
                </div>
            </div>
            <div style="width: 50%;">
                <p class="tag-title">来源渠道</p>
                <div>
                    <bar-chart :width="'48vw'" :chart-option="barChartOptionData" :height="'250px'" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PieChart from '@/components/DuoJuHe/Form/echarts/PieChart'
import LineChart from '@/components/DuoJuHe/Form/echarts/LineChart'
import MapChart from '@/components/DuoJuHe/Form/echarts/MapChart'
import CountTo from '@/components/DuoJuHe/Form/CountTo'
import BarChart from '@/components/DuoJuHe/Form/echarts/BarChart'
import {queryProjectResultReportDeviceResByProjectId,queryProjectResultReportSituationResByProjectId,queryProjectResultReportSourceResByProjectId,queryProjectResultReportStatsResByProjectId} from '@/api/form/formProjectResult'

export default {
    name: 'StatisticsChart',
    props: {
      pId: {
        type: String,
        default: ''
      }
    },
    components: {
        CountTo,
        MapChart,
        PieChart,
        BarChart,
        LineChart
    },
    data() {
        return {
            projectListData: null,
            projectStats: {
                avgCompleteTime: 0,
                hitsCount: 0,
                completeCount: 0,
                completeRate: 0
            },
            activeProjectKey: null,
            // 回收折现图
            lineChartOptionData: {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    data: []
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
                    color: 'black',
                    borderWidth: '1',
                    borderColor: 'rgb(156,209,255)',
                    textStyle: {
                        color: 'black'
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                series: [{
                    data: [],
                    name: '回收数',
                    stack: '总量',
                    type: 'line',
                    areaStyle: {}
                }]
            },
            barChartOptionData: {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
                    color: 'black',
                    borderWidth: '1',
                    borderColor: 'rgb(156,209,255)',
                    textStyle: {
                        color: 'black'
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    interval: 1,
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: [0]
                },
                series: [
                    {
                        barWidth: 30,
                        name: '数量',
                        type: 'bar',
                        data: [0]
                    }
                ]
            },
            pieChartOptionData: {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
                    color: 'black',
                    borderWidth: '1',
                    borderColor: 'rgb(156,209,255)',
                    textStyle: {
                        color: 'black'
                    }
                },
                series: [
                    {
                        name: '设备类型',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [0]
                    }
                ]
            }
        }
    },
    created() {
        let pKey = this.$route.query.key
        this.activeProjectKey = pKey?pKey:this.pId
        this.projectChangeHandle()

    }, methods: {
        projectChangeHandle() {
            this.getProjectStats()
            this.getProjectSituation()
            this.getProjectSubmitDevice()
            this.getProjectSubmitSource()
        },
        getProjectStats() {
            queryProjectResultReportStatsResByProjectId({"projectId":this.activeProjectKey}).then(res => {
                this.projectStats = res.data
                if (this.projectStats.completeCount) {
                    let rate = this.projectStats.completeRate
                    this.projectStats.completeRate = rate > 1 ? 100 : rate * 100
                } else {
                    this.projectStats.completeRate = 0
                }
            })
        },
        getProjectSituation() {
          queryProjectResultReportSituationResByProjectId({"projectId":this.activeProjectKey}).then(res => {
                this.lineChartOptionData.xAxis.data = res.data.map(item => {
                    return item.createTime
                })
                this.lineChartOptionData.series = [{
                    data: res.data.map(item => {
                        return item.completeCount
                    }),
                    name: '回收数',
                    stack: '总量',
                    type: 'line',
                    areaStyle: {}
                }]
            })
        },
        getProjectSubmitSource() {
          queryProjectResultReportSourceResByProjectId({"projectId":this.activeProjectKey}).then(res => {
                if (res.data && res.data.length) {
                    this.barChartOptionData.yAxis.data = res.data.map(item => {
                        return item.submitBrowser ? item.submitBrowser : '其他'
                    })
                    this.barChartOptionData.series = [
                        {
                            barWidth: 30,
                            name: '数量',
                            type: 'bar',
                            data: res.data.map(item => {
                                return item.completeCount
                            })
                        }
                    ]
                }
            })
        },
        getProjectSubmitDevice() {
          queryProjectResultReportDeviceResByProjectId({"projectId":this.activeProjectKey}).then(res => {
                if (res.data && res.data.length) {
                    this.pieChartOptionData.series[0].data = res.data.map(item => {
                        return {value: item.completeCount, name: item.submitOs ? item.submitOs : '其他'}
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    margin: 0;
    padding: 0;
    overflow-x: hidden!important;
}
.tag-title {
    font-size: 16px;
    line-height: 25px;
   margin-left: 20px;
}
.project-index-view {
    & > div {
        display: flex;
        width: 80%;
        text-align: center;
        margin: 0 auto;
        justify-content: space-between;
        padding-top: 20px;
    }
}
</style>
